一般的引用antd中的组件我们需要
import {Button} from 'antd'
class App extends React.Component{

render(){
    return(
        <div>
            <Button/>
        </div>
    )
}

}
如上代码所示,需要把import的组件放在我们的render中去渲染,
import {message,Button} from 'antd'
class App extends React.Component{

handleClick=()=>{
     message.success('注册成功!', 2)
}
render(){
    return(
        <div>
            <Button onClick={this.handleClick}/>
        </div>
    )
}

}
像message这种组件,我们就可以当作一个方法调用,然后出现相应提示界面,其原理是利用React.createElement()方法,传入相应的html标签和元素类型内容,然后也是插入到Root根节点message对应实例方法如下
getMessageInstance(function (instance) {

  var iconNode = React.createElement(_icon["default"], {
    type: iconType,
    theme: iconType === 'loading' ? 'outlined' : 'filled'
  });
  instance.notice({
    key: target,
    duration: duration,
    style: {},
    content: React.createElement("div", {
      className: "".concat(prefixCls, "-custom-content").concat(args.type ? " ".concat(prefixCls, "-").concat(args.type) : '')
    }, args.icon ? args.icon : iconType ? iconNode : '', React.createElement("span", null, args.content)),
    onClose: callback
  });
});

});


WARRIOR
25 声望3 粉丝